<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间戳转换器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>时间戳转换器</h1>
        
        <div class="card">
            <h2>时间戳转日期时间</h2>
            <div class="input-group">
                <input type="text" id="timestampInput" placeholder="输入UNIX时间戳（秒或毫秒）">
                <select id="timestampType">
                    <option value="seconds">秒</option>
                    <option value="milliseconds">毫秒</option>
                </select>
            </div>
            <div class="input-group">
                <label for="timezoneSelect">时区：</label>
                <select id="timezoneSelect">
                    <option value="0">UTC+0</option>
                    <option value="8" selected>UTC+8 (北京时间)</option>
                    <option value="-5">UTC-5 (美国东部时间)</option>
                    <option value="1">UTC+1 (中欧时间)</option>
                    <option value="9">UTC+9 (日本时间)</option>
                </select>
            </div>
            <button id="convertToDateBtn">转换为日期时间</button>
            <div class="result" id="dateResult"></div>
        </div>

        <div class="card">
            <h2>日期时间转时间戳</h2>
            <div class="input-group">
                <input type="datetime-local" id="dateTimeInput">
            </div>
            <div class="input-group">
                <label for="outputTimezoneSelect">时区：</label>
                <select id="outputTimezoneSelect">
                    <option value="0">UTC+0</option>
                    <option value="8" selected>UTC+8 (北京时间)</option>
                    <option value="-5">UTC-5 (美国东部时间)</option>
                    <option value="1">UTC+1 (中欧时间)</option>
                    <option value="9">UTC+9 (日本时间)</option>
                </select>
            </div>
            <button id="convertToTimestampBtn">转换为时间戳</button>
            <div class="result" id="timestampResult"></div>
        </div>

        <div class="card">
            <h2>当前时间</h2>
            <div class="current-time">
                <div>当前本地时间：<span id="currentLocalTime"></span></div>
                <div>当前UTC时间：<span id="currentUTCTime"></span></div>
                <div>当前时间戳（秒）：<span id="currentTimestamp"></span></div>
                <div>当前时间戳（毫秒）：<span id="currentTimestampMs"></span></div>
            </div>
        </div>
    </div>

    <footer>
        <p>© 2025 时间戳转换器 | <a href="https://github.com/yourusername/timestamp-converter" target="_blank">GitHub</a></p>
    </footer>

    <script src="script.js"></script>
</body>
</html> 